<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue.min.js-->
    <script src="vue.min.js"></script>
</head>
<body>
<!--定义表示范围 id可以随意指定-->
<div id="app">
    <!--循环指令 v-for:想要那个变多就用哪个,
    v-for="i in 10"(v-for="变量名 in 循环次数/循环对象")-->
    <ul>
        <li v-for="i in 10">{{i}}</li>
    </ul>

    <!--数据列表-->
    <table border="1">
        <tr>
            <td>主键</td><td>年龄</td><td>名字</td>
        </tr>
        <tr v-for="user in list">
            <td>{{user.id}}</td>
            <td>{{user.age}}</td>
            <td>{{user.name}}</td>
        </tr>
    </table>

</div>
</body>
<script>
    //##创建 vue实例
    new Vue({
        el:'#app',//##绑定标识范围
        data:{//##定义变量,并进行初始化
            message:'双向绑定能够影响变量值',
            ok:false,
            list:[
                {id:'001', age:'20', name:'照垣'},
                {id:'002', age:'20', name:'照垣'},
                {id:'003', age:'20', name:'照垣'},
                {id:'004', age:'20', name:'照垣'}
            ]
        },
        methods:{//##定义函数
            query(){
                console.log("查询方法")
            },
            add(){
                alert("添加方法")
            }
        }
    })
</script>
</html>